<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>菜谱分类</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/classification.css" />
		<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.2.min.css" />
	</head>

	<body>
		<header class="header">
			<span><</span>
			<span>菜谱分类</span>
			<span></span>
		</header>

		<div class="lists">
			<!-- banner -->
			<section class="A-part">
				<div class="swiper-container-list banner">
					<div class="swiper-wrapper nav-list">
						<div class="swiper-slide active">热门</div>
						<div class="swiper-slide">菜系</div>
						<div class="swiper-slide">食材</div>
						<div class="swiper-slide">场景</div>
						<div class="swiper-slide">体质</div>
						<div class="swiper-slide">时令</div>
						<div class="swiper-slide">烹饪方式</div>
						<div class="swiper-slide">智能方式</div>

					</div>
				</div>
				<div class="swiper-container-opts Menu-list">
					<div class="swiper-wrapper">
						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

						<div class="swiper-slide list">
							<div class="Hot">
								<div><img src="../img/list-1.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-3.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-5.png" /></div>
								<div><img src="../img/list-6.png" /></div>
								<div><img src="../img/list-2.png" /></div>
								<div><img src="../img/list-4.png" /></div>
								<div><img src="../img/list-3.png" /></div>
							</div>
						</div>

					</div>
				</div>
			</section>

		</div>

		<script src="../js/jquery-3.2.1.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>

		<script>
			$('.header span:first-child').click(function() {

				location.href = "../index.html"
			})

			var Swiper_active1 = $('.swiper-container-list .active'),
				Swiper_slide1 = $('.swiper-container-list .swiper-slide');
			var _mySwiperlist = new Swiper('.swiper-container-list', {
				watchSlidesProgress: true,
				watchSlidesVisibility: true,
				slidesPerView: 6,
				onTap: function() {
					_mySwiperopts.slideTo(_mySwiperlist.clickedIndex)
				}
			})
			var _mySwiperopts = new Swiper('.swiper-container-opts', {
				onSlideChangeStart: function() {
					updateNavPosition(Swiper_active1, Swiper_slide1, _mySwiperopts, _mySwiperlist)
				}
			})

			function updateNavPosition(Swiper_active, Swiper_slide, mySwiper, mySwiper_list) {
				Swiper_active.removeClass('active')
				var activeNav = Swiper_slide.eq(mySwiper.activeIndex).addClass('active');
				activeNav.siblings().removeClass("active");
				if(!activeNav.hasClass('swiper-slide-visible')) {
					if(activeNav.index() > mySwiper_list.activeIndex) {
						var thumbsPerNav = Math.floor(mySwiper_list.width / activeNav.width()) - 1
						mySwiper_list.slideTo(activeNav.index() - thumbsPerNav)
					} else {
						mySwiper_list.slideTo(activeNav.index())
					}
				}
			}
		</script>
	</body>

</html>